<script setup lang="ts">
import type { UniPopupProps, UniPopupType } from '@uni-helper/uni-ui-types'
import { ref } from 'vue'

defineProps<{
  title: string
}>()

const popupRef = ref<UniPopupProps | null>()

/** 打开弹框 */
const open = (type: UniPopupType = 'bottom') => popupRef.value?.open?.(type)

/** 关闭弹框 */
const close = () => popupRef.value?.close?.()

defineExpose({
  open,
  close,
})
</script>

<template>
  <uni-popup ref="popupRef" class="popup">
    <view class="popup-container">
      <slot name="header">
        <view class="popup-header">
          <uni-title :title="title" type="h2" />
          <view>
            <uni-icons type="closeempty" :size="26" @click="close" />
          </view>
        </view>
      </slot>
      <slot name="content" />
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
.popup {

  &-container {
    background-color: $color-white;
    padding: $padding-base;

  }

  &-header {
    display: flex;
    justify-content: space-between;
    height: 80rpx;

  }

  &-content {
    display: flex;
  }
}
</style>
